import React from 'react';
import ReactDOM from 'react-dom';

export default class ShopCartPage extends React.Component { //我的购物车页面
    render() {
        getDataLoad();
        return (
            <div>

                <ShopCartTitle/>

            </div>
        );
    };
}

class ShopCartTitle extends React.Component {
    render() {

        return (
            <div id="shoppingCartTitle">
                <ul>
                    <li>商品信息</li>
                    <li>单价(金币)</li>
                    <li>数量</li>
                    <li>金额(金币)</li>
                    <li>操作</li>
                </ul>
            </div>
        );
    };
}














function getDataLoad() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
        var response_data = "null";
        var phone = "15079158510";  //用户手机号
        var token = "dsewde"; //携带token请求数据

        var req_data = "phone=" + phone + "&login_id="+token;
        xmlhttp.open("POST", "http://192.168.1.115:8080/VP-server/shopping_cart/queryByUser", true);  //--请求方式，服务器url,是否异步
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        xmlhttp.send(req_data);
        xmlhttp.onreadystatechange = function () //<!-- 服务器每次状态改变 调用-->
        {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) //-- 200是ok
            {
                response_data = xmlhttp.responseText;
                loadShoppingCartData(response_data);
            }
        }
    // var response_data ="[\n" +
    //     "\n" +
    //     "    {\n" +
    //     "\n" +
    //     "        \"goods_info\": \"猫粮\",\n" +
    //     "\n" +
    //     "        \"price\": 888,\n" +
    //     "\n" +
    //     "        \"g_num\": 5,\n" +
    //     "\n" +
    //     "        \"value\": 4440\n" +
    //     "\n" +
    //     "    },\n" +
    //     "\n" +
    //     "    {\n" +
    //     "\n" +
    //     "        \"goods_info\": \"一级猫装\",\n" +
    //     "\n" +
    //     "        \"price\": 999,\n" +
    //     "\n" +
    //     "        \"g_num\": 1,\n" +
    //     "\n" +
    //     "        \"value\": 999\n" +
    //     "\n" +
    //     "    },\n" +
    //     "\n" +
    //     "    {\n" +
    //     "\n" +
    //     "        \"goods_info\": \"一级狗粮\",\n" +
    //     "\n" +
    //     "        \"price\": 898,\n" +
    //     "\n" +
    //     "        \"g_num\": 1,\n" +
    //     "\n" +
    //     "        \"value\": 898\n" +
    //     "\n" +
    //     "    }\n" +
    //     "\n" +
    //     "]\n";
    //loadShoppingCartData(response_data);
    }
 }



function loadShoppingCartData(shoppingCart_str) {  //将json字符串 解析加载到
    var shoppingCartsJson = JSON.parse(shoppingCart_str);

    var carts_div = document.createElement("div");
    carts_div.setAttribute("id","carts_div");

    var parent = document.getElementById("shop");
    parent.appendChild(carts_div);

    for (var li = 0; li < shoppingCartsJson.length; li++) {
        var shoppingCart = shoppingCartsJson[li];  //json对象 一条购物车数据
        var div1 = document.createElement("div");


        var h1 = document.createElement("h2");

        h1.innerHTML = shoppingCart.goods_info;

        var h2 = document.createElement("h2");

        h2.innerHTML = shoppingCart.price;


        var h3 = document.createElement("h2");

        h3.innerHTML = shoppingCart.g_num;


        var h4 = document.createElement("h2");

        h4.innerHTML = shoppingCart.value;


        var btn = document.createElement("button");
        btn.setAttribute("style", "float:left;margin-left:150px;margin-top:20px;width:90px;height:24px");

        btn.innerHTML = "删除";
        btn.onclick = function () {
            alert("删除成功！")
        }

        div1.appendChild(h1);
        div1.appendChild(h2);
        div1.appendChild(h3);
        div1.appendChild(h4);
        div1.appendChild(btn);
        carts_div.appendChild(div1);

    }
}


























